<template>
  <a-drawer
    title="审批表预览"
    width="100%"
    :visible="modalVisible"
    :body-style="{ paddingBottom: '80px', paddingRight: '20px' }"
    @close="handleCancel"
  >
    <a-spin :spinning="previewLoading">
      <iframe
        id="iframe"
        v-show="previewUrl != ''"
        :src="previewUrl"
        width="100%"
        height="900px"
        scrolling="yes"
        frameborder="0" ></iframe>
      <a-empty v-show="previewUrl == ''" description="无法预览" style="width:100%; height:650px" />
      <div>

      </div>
    </a-spin>
  </a-drawer>
</template>

<script>
import { previewApproveDoc } from '@/api/accept/business_Approve.js'
import { kkfilePreview } from '@/utils/util.js'
export default {
  data () {
    return {
      labelCol: { span: 4 }, // label宽
      wrapperCol: { span: 20 }, // 组件宽
      loading: false, // 按钮显示
      modalVisible: false, // 模态框显示
      previewFileSrc: '',
      previewLoading: false,
      applyid: null,
      modelKey: null, // 流程模型定义key
      formData: null,
      previewUrl: null
    }
  },
  methods: {
    f_init (applyid, modelKey, formData) {
      this.applyid = applyid
      this.modelKey = modelKey
      this.formData = formData
      this.modalVisible = true
      this.$nextTick(() => {
        this.previewApproveDoc(applyid, modelKey, formData)
      })
    },
    handleCancel () {
      this.modalVisible = false
    },
    // 预览加载
    previewApproveDoc (applyid, modelKey, formData) {
      this.previewLoading = true
      previewApproveDoc(applyid, modelKey, formData)
        .then((res) => {
          if (res.code == 0) {
            const file = res.data
            this.previewUrl = kkfilePreview(file.path)
          } else {
            this.$message.error('预览失败')
          }
        }).finally(() => {
          this.previewLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped></style>
